<template>
  <!-- 产品卡片 -->
  <div class="product-card" @click="gotoDetailsPage">
    <!-- 商品图 -->
    <div class="product-image">
      <img :src="product.imageUrl" alt="商品图">
    </div>

    <!-- 购买评分 -->
    <el-rate v-model="rating" :colors="colors" allow-half disabled />

    <!-- 商品名称 + 价格 -->
    <div class="product-info">
    <h3>{{ product.name }}</h3>
    <div class="price-container">
      <!-- 有折扣时显示原价，带上横线 -->
        <div class="original-price" v-if="oldPrice"> $ {{ oldPrice }} </div>
        <!-- 原价必显示 -->
        <span class="current-price"> $ {{ newPrice }} </span>
    </div>
    </div>

     <!-- 鼠标悬停效果 -->
    <div class="hover-effect">
      <div class="actions" >
        <button><ShoppingBag /></button>
        <button><HeartOutlined /></button>
        <button><SyncOutlined /></button>
        <button><SearchOutlined /></button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { SearchOutlined, SyncOutlined, HeartOutlined } from '@ant-design/icons-vue';
import { ShoppingBag } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  product:{
    type: Object,
    default: () => {}
  }
})

const rating = ref(0)

const oldPrice = ref(0)
const newPrice = ref(0)

// 星星颜色
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])

// 跳转详情页
function gotoDetailsPage() {
  const targetRoute = router.resolve({
    path: '/detail',
    query: { id: props.product.id }
  })
  window.open(targetRoute.href, '_blank', 'noopener,noreferrer')
}

onMounted(() => {
  rating.value = props.product.rating
  oldPrice.value = props.product.newPrice ? (props.product.price / 100).toFixed(2) : 0
  newPrice.value = props.product.newPrice ? (props.product.newPrice / 100).toFixed(2) : (props.product.price / 100).toFixed(2)
})

</script>

<style scoped>
.product-card {
  padding: 20px;
  text-align: center;
  position: relative; /* 让悬停按钮定位生效 */
  transition: all 0.3s ease;
  transform-origin: center top; /* 放大时从顶部居中缩放，避免挤压 */
  box-sizing: border-box; /* 确保内边距和边框包含在宽度和高度内 */
}
/* 商品图片容器 */
.product-image {
  margin-bottom: 15px;
  height: auto;
}
/* 商品图片 */
.product-image img {
  width: 100%;
  transition: transform 0.3s ease;  /* 添加缩放过渡动画 */
}
/* 星级评分 */
.rating {
  font-size: 16px;
  margin: 0px 0;
}
.product-info {
  margin-bottom: 10px; /* 原为40px，增加到60px给按钮留出更多空间 */
}
/* 商品信息区 */
.product-info h3 {
  font-size: 18px;
  margin-bottom: 5px;         /* 底部外边距，与价格拉开距离 */
  overflow: hidden;
}
/* 价格区域 */
.price-container {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  gap: 8px;
}
/* 原价样式（带横线） */
.original-price {
  color: #999; /* 灰色区分 */
  text-decoration: line-through; /* 关键：添加横线 */
}
/* 现价 */
.current-price {
  color: #BEAE59;
  font-weight: 600; /* 加粗突出 */
}


/* ================================================================================ */

.product-card:hover {
  border: 1px solid #ccc; /* 悬停时边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 悬停时阴影 */
  cursor: pointer;
}
/* 悬停按钮容器 */
.hover-effect {
  position: relative;
  height: 40px; /* 给固定高度，让按钮有定位参考 */
}
/* 悬停时显示的操作按钮 */
.actions {
  position: absolute;
  bottom: -60px; /* 按钮距离卡片底部10px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 13px; /* 按钮之间的间距 */
  opacity: 0;
  transition: all 0.3s ease;
}
.product-card:hover .actions {
  opacity: 1;
  bottom:1px; /* 按钮移到卡片内 */
}
.actions button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DCDCDC;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* 对购物袋按钮调整 */
.actions button svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.2px !important;
  transform: scale(1) !important;
}
.actions button:first-child svg {
  stroke-width: 1px !important;
}
</style>